<ul class="row mx-0">
  <li class="col-sm-12 p-1">
    <div class="pb-0 pt-sm">
      <span class="font-weight-bold pod-item-key">ID:</span>
      <span class="ml auto-hide pod-item-value">
        {{ container.id }}
      </span>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div
      *ngIf="container.children && container.children.length > 1"
      class="pb-0 pt-sm">
      <div>
        <span class="font-weight-bold pod-item-key"
          >{{ 'network.nodeDetails.IMAGE' | translate }}:</span
        >
      </div>
      <div class="ml pod-item-value">
        <div *ngFor="let child of container.children" class="row">
          <div
            *ngIf="child"
            class="auto-hide"
            style="margin-top: 2px; width: 620px">
            <span class="font-weight-bold pl-lg" style="display: inline-block">
              <em class="fa fa-square-o mr-sm"></em>
              {{ child.display_name | slice: 0:55
              }}{{ child.display_name.length > 35 ? '...' : '' }}
            </span>
            <label
              *ngIf="child.service_mesh_sidecar"
              class="label label-info-tran ml-lg mt-sm"
              style="display: inline-block">
              Sidecar:
            </label>
            <em class="fa fa-archive pl-lg mr-sm"></em>
            <span class="auto-hide" style="margin-top: -2px">
              {{ child.image }}
            </span>
          </div>
        </div>
      </div>
    </div>
    <div
      *ngIf="!container.children || container.children.length <= 1"
      class="pb-0 pt-sm">
      <div>
        <span class="font-weight-bold pod-item-key"
          >{{ 'network.nodeDetails.IMAGE' | translate }}:</span
        >
      </div>
      <div class="ml pod-item-value">
        <div *ngFor="let image of container.images">
          <span class="d-block">
            {{ image }}
          </span>
        </div>
      </div>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="pb-0 pt-sm">
      <span class="font-weight-bold pod-item-key">
        {{ 'network.nodeDetails.ENFORCER' | translate }}:
      </span>
      <span class="ml auto-hide pod-item-value">
        {{ container.enforcer_name }}
      </span>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="row" style="margin-left: 1px">
      <div class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'group.gridHeader.DOMAIN' | translate }}:
        </span>
        <span class="ml auto-hide pod-item-value">
          {{ container.domain }}
        </span>
      </div>
      <div class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.gridHeader.SERVICE' | translate }}:
        </span>
        <span class="ml auto-hide pod-item-value">
          {{ container.service }}
        </span>
      </div>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="row" style="margin-left: 1px">
      <div class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.LOCATION' | translate }}:
        </span>
        <span class="ml auto-hide pod-item-value">
          {{ container.host_name }}
        </span>
      </div>
      <div class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.STATE' | translate }}:
        </span>
        <span class="badge text-white" style="background-color: #1154a2">{{
          container.policy_mode
        }}</span>
        <span
          *ngIf="container.state === 'quarantined'"
          class="text-danger mr-lg auto-hide pod-item-value"
          style="display: block; width: 180px">
          {{ container.quarantine_reason }}
        </span>
      </div>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="row" style="margin-left: 1px">
      <div class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.CREATED_AT' | translate }}:
        </span>
        <span class="ml auto-hide pod-item-value">
          {{ container.started_at | date: 'MMM dd, y HH:mm:ss' }}
        </span>
      </div>
      <div
        *ngIf="!!container.scan_summary.scanned_at"
        class="col-sm-6 pl-0 pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.SCANNED_AT' | translate }}
        </span>
        <span
          class="ml mr-lg auto-hide pod-item-value"
          style="display: block; width: 150px">
          {{ container.scan_summary.scanned_at | date: 'MMM dd, y HH:mm:ss' }}
        </span>
      </div>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="row" style="margin-left: 1px">
      <div class="col-sm-6 pl-0 mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.PRIVILEGED' | translate }}:
        </span>
        <span class="ml mr-lg auto-hide pod-item-value">
          {{ container.privileged }}
        </span>
      </div>
      <div class="col-sm-6 pl-0 mda-list-item-text pb-0 pt-sm">
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.RUN_AS_ROOT' | translate }}:
        </span>
        <span class="ml mr-lg auto-hide pod-item-value">
          {{ container.run_as_root }}
        </span>
      </div>
    </div>
  </li>
  <li class="col-sm-12 p-1">
    <div class="pb-0 pt-sm">
      <span class="font-weight-bold pod-item-key">
        {{ 'group.gridHeader.VULNERABILITIES' | translate }}:
      </span>
      <div class="pod-item-value d-inline">
        <span
          *ngIf="container.scan_summary.high"
          class="badge badge-danger mr-sm">
          {{ container.scan_summary.high }}</span
        >
        <span *ngIf="container.scan_summary.medium" class="badge badge-warning">
          {{ container.scan_summary.medium }}</span
        >
        <a
          *ngIf="container.scan_summary.high || container.scan_summary.medium"
          style="display: table-cell; font-size: 11px; line-height: 15px">
          <em class="fa fa-external-link ml-lg"></em>
        </a>

        <span
          *ngIf="
            container.scan_summary.scanned_at &&
            container.scan_summary.high === 0 &&
            container.scan_summary.medium === 0
          "
          class="badge badge-success">
          <em class="fa fa-shield-alt text-protect mr-1"></em> Clean
        </span>

        <button
          *ngIf="
            !container.scan_summary.scanned_at &&
            !container.scan_summary.status &&
            !isScanStarted4Pod
          "
          class="d-inline-flex justify-content-center align-items-center"
          disabled
          mat-flat-button
          style="height: 25px">
          {{ 'scan.SCAN' | translate }}
        </button>

        <div *ngIf="isScanStarted4Pod" class="ml mt-sm pull-left">
          <label class="mt-sm label label-info-tran">
            <em class="fa fa-cog fa-spin mr-sm"></em> Scanning...
          </label>
        </div>
      </div>
    </div>
  </li>
  <li *ngIf="container.network_mode" class="col-sm-6 p-1">
    <div class="pb-0 pt-sm">
      <span
        class="font-weight-bold pod-item-key"
        translate="{{ 'network.nodeDetails.NETWORK_MODE' }}"></span>
      <span class="ml auto-hide pod-item-value">
        {{ container.network_mode }}
      </span>
    </div>
  </li>
  <li
    *ngIf="(!container.children || container.children.length <= 1) && hasApps"
    class="col-sm-12 p-1">
    <div class="pb-0 pt-sm">
      <div>
        <span class="font-weight-bold pod-item-key">
          {{ 'network.nodeDetails.APPLICATIONS' | translate }}:
        </span>
      </div>
      <div class="ml auto-hide pod-item-value">
        {{ apps }}
      </div>
    </div>
  </li>
  <li *ngIf="hasInterfaces" class="col-sm-12 p-1">
    <div class="pb-0 pt-sm">
      <div>
        <span class="font-weight-bold"
          >{{ 'containers.detail.NETWORK_INTERFACES' | translate }}:</span
        >
      </div>
      <div
        *ngFor="let item of container.interfaces | keyvalue"
        class="row ml"
        style="width: 380px">
        <div class="col-sm-2 text-left pr0">
          {{ item.key }}
        </div>
        <div class="col-sm-1"></div>
        <div class="col-sm-9 pl-0">
          <div *ngFor="let net of item.value">
            <div class="col-sm-12">
              <div class="col-sm-6">IP:{{ net.ip }}/{{ net.ip_prefix }}</div>
              <div *ngIf="net.gateway" class="col-sm-6">
                {{ 'general.GATEWAY' | translate }}:{{ net.gateway }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>
